<template>
	<div>
        <!-- <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="所属城市">
					<el-select-v2
                        v-model="queryParams.area_id"
                        filterable
                        clearable
                        :options="optionCity"
                        placeholder="请选择"
                        class="w-60"
                        :height="280"
                    />
				</el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
        <el-card class="!border-none" shadow="never">
            <router-link
                v-perms="['user.group/saveGroup']"
                :to="{path: getRoutePath('user.group/groupInfo')}"
            >
            <el-button type="primary" class="mb-4">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                新建群聊
            </el-button>
            </router-link>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" :index="indexAdd" />
                <el-table-column label="名称" min-width="180" prop="name"/>
                <el-table-column label="链接" min-width="180" prop="wx_str"/>
                <el-table-column label="创建时间" min-width="180" prop="create_time"/>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <router-link
                            v-perms="['user.kefu/kefuInfo']"
                            :to="{ path: getRoutePath('user.kefu/kefuInfo'), query: { id: row.id } }"
                        >
                            <el-link v-perms="['user.kefu/kefuInfo']" type="primary" :underline="false">编辑</el-link>
                        </router-link>
                        <el-link class="link" v-perms="['user.kefu/delKefu']" type="danger" :underline="false" @click="handledelKefu(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="demandLists">
	import { kefuList, delKefu } from '@/api/group';
	import { usePaging } from '@/hooks/usePaging';
    import { getRoutePath } from '@/router'
    import feedback from '@/utils/feedback'
    import useAppStore from '@/stores/modules/app'
    const useApp = useAppStore()
    const optionCity:any = useApp.optionCity;

	let queryParams:any = reactive({});
	
	onMounted(async () => {
		getLists();
	});

    const handledelKefu = async (row:any) => {
        console.log(row)
        try{
			await feedback.confirm('是否确认删除')
			await delKefu({
				kefu_id: row.id
			})
            getLists();
		}catch(error){
			console.log(error)
		}
    }

	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: kefuList,
		params: queryParams
	})

</script>
<style lang="scss" scoped>
.content{
    width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.link{
    margin: 0 10px;
}
</style>